<template>
    <div>
      动画处理
      <button @click="show = !show">点击显示/隐藏</button>
      <transition name="myFade">
        <p v-if="show">hello</p>
      </transition>

      <p>测试animate.css的动画</p>
      <button @click="show02 = !show02">点击显示/隐藏</button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="show02">hello02</p>
      </transition>

    </div>
</template>

<script>
    export default {
      name: "MyAnimateTest",
      data() {
        return {
          show: true,
          show02: true
        };
      }
    }
</script>

<style scoped>
  .myFade-enter, .myFade-leave-to {
    opacity: 0;
  }
  .myFade-enter-to, .myFade-leave {
    opacity: 1;
  }
  .myFade-enter-active, .myFade-leave-active {
    transition: opacity 2s;
  }

</style>
